<template>
   <div id='score-chart' class='score-chart'></div>
</template>
<script>
export default {
  props: ['areaData'],
  data () {
    return {
      myChart: {},
      data:[],
      dataCategory:[],
      st: null,
    }
  },
  mounted () {
    window.addEventListener('resize', function () {
      this.myChart.resize()
    }.bind(this))
    this._initChart()
  },
  destroyed() {
    clearTimeout(this.st)
  },
  methods: {
    _initChart () {
      this.data = []
      this.dataCategory = []
      for(let i in this.areaData.child){
        this.data.push(this.areaData.child[i].confirmedStuNum)
        this.dataCategory.push(this.areaData.child[i].areaName)
      }
      this.myChart = this.$echarts.init(document.getElementById('score-chart'))
      
      this.st = setTimeout(this._initChart,1000)
      this.myChart.setOption({
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x : 'center',
          y : 'bottom',
          left: 20,
          right: 20,
          bottom: 30,
          type: 'scroll',
          pageIconColor:'white',
          pageTextStyle:{
            color: 'white'
          },
          data: (() => {
              let obj = []
              for(let i in this.dataCategory){
                obj.push({icon:'roundRect',name:this.dataCategory[i]})
              }
              return obj
            })(),
          textStyle: {
            color: 'white'
          }
        },
        calculable : true,
        series : [
          {
            name:'考生比例',
            type:'pie',
            radius : ['15%', '60%'],
            center : ['50%', '40%'],
            roseType : 'area',
            data:(() => {
              let bData = []
              for(let i in this.dataCategory){
                bData.push({value:this.data[i],name:this.dataCategory[i]})
              }
              return bData
            })()
          }
        ]
      })
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.score-chart {
  width: 100%;
  height: 100%;
}
</style>
